<template>
  <div class="detail">
     <p>详情页</p>
    
    <div class="info" v-if="data">
      <img :src="data.goodsImg" alt="">
      <p class="name">{{ data.goodsName }}</p>
      <p class="price">{{ data.goodsPrice }}</p>
      <p>
        <button class="addToShoppingCar" @click="addToShoppingCar">加入购物车</button>
      </p>
    </div>
    <hr>
    <div>
      <!-- 
          点击查看类似商品时 => 路由跳转的还是/detail详情页 => 此时Detail组件不会重新初始化,而是会继续复用 => 只是数据部分更新了
          问题:由于没有做数据更新处理  => 不会重新发送请求, 也不会渲染新的商品?


          解决方法:监听数据改变  => 重新发送请求,渲染新的商品?


       -->


      <p>查看类似商品:</p>
      <p> 
          <router-link :to="{path:'/detail',query:{gid:100016799352}}">红米note9</router-link> | 
          <router-link :to="{path:'/detail',query:{gid:100018640796}}">红米K40</router-link>
      </p>
    </div>



  </div>
</template>

<script>
// @是/src的别名 => 从src目录下开始查找

export default {
  name: 'AboutView',
  data(){
    return {
      gid:null,
      data:null,
      start:null,
      end:null,
    }
  },
  methods:{
    getGoodsDetail(){
      this.$axios.get("http://121.43.116.41/demo/php/searchGoodsByGoodsId.php",{
        params:{
          gid:this.gid,
        }
      }).then(response=>{
        return response.data;
      }).then(res=>{
        console.log("详情",res);
        var {status} = res;
        if(status){
          this.data = res.data;
        }
      })
    },

    /* 
      加入购物车之前需要验证用户是否已经登录  
      //  如果用户已经登录(标识用户身份 / token)  => 直接购买
      //  如果用户没有登录 => 去登录
    
    */
    addToShoppingCar(){
      console.log("准备加入购物车");
      var token = localStorage.getItem("token");
      if(token){
        console.log("可以购买该商品");
        this.$router.push("/car");
      }else{ // 用户还未登录  => 去登录

      // router.push(location, onComplete?, onAbort?)    从当前路由跳转至指定路由页面(新增一条历史记录)
       // router.replace(location, onComplete?, onAbort?)  从当前路由跳转至指定路由页面(不会新增历史记录,替换当前历史记录)
       
        // location.hash="#/login";   // hash模式 => low

        // 直跳转
        // this.$router.push("/login"); 


        

        // push()  版
        // 主页 -> 列表 ->详情(没登录) -> 登录  -> 详情 -> 购物车
        
        //  跳转同时携带 当前路由页面信息
        // this.$router.push("/login?ReturnURL="+this.$route.fullPath);  //(拼接版)
        // this.$router.push({path:'/login',query:{ReturnURL:this.$route.fullPath}});  //(拼接版)
        
        // replace()
        // 主页 -> 列表 ->详情(没登录) => 替换为登录  -> 替换为详情 -> 购物车
        this.$router.replace({path:'/login',query:{ReturnURL:this.$route.fullPath}});  //(拼接版)



      }
    }
  },
  watch:{
    // 监听$route上的数据发生改变
    // $route:function(newVal){
    //   console.log("$route中的数据改变了",newVal);
    //   this.gid = this.$route.query.gid;
    //   this.getGoodsDetail();
    // }

     // 监听$route.query.gid"发生改变
    /* "$route.query.gid":function(newVal){
      console.log("$route.query.gid的数据改变了",newVal);
      this.gid = this.$route.query.gid;
      this.getGoodsDetail();
    } */
  },
  mounted(){ // 初始化阶段执行

    // $route  $router => Vue中的全局属性,所有的Vue实例都可以访问
    // $route  当前路由信息(一个) 
    // $router  路由实例 => 包含所有的路由信息,常用于路由跳转

    // console.log("当前Vue实例",this);
    console.log("当前路由信息",this.$route);   // 
    // console.log("当前路由实例",this.$router); 

    // query传参对应接收数据的方式
    // console.log(this.$route.query);
    this.gid = this.$route.query.gid;
    this.getGoodsDetail();
  },
  // 组件内的守卫
  // beforeRouteEnter  组件渲染之前执行(当路由切换时,新的路地址,对应的组件准备要渲染,渲染之后先执行一遍组件内钩子函数)
  // beforeRouteUpdate
  // beforeRouteLeave



  /* beforeRouteEnter:function(to,from,next){
    console.log("组件内守卫:组件渲染之前执行:from",from);
    console.log("组件内守卫:组件渲染之前执行:to",to);

    // 当前钩子函数属于组件渲染前的准备函数 =>   此时组件还未渲染 => 不能直接访问this
    // next();

    // 如果此阶段需要访问当前组件(vue实例) => 可以传入一个回调函数 => 此回调函数会在组件挂载之前执行(可以通过形参vm => 获取当前组件实例)
    // next(function(vm){
    //   console.log(111111,vm);
    // })

    // next(false);

    // 模拟一下 拼多多做任务
    
    next(function(vm){
      console.log(111111,vm);
      var start = Date.now();
      vm.start = start;
    })



  }, */

  beforeRouteUpdate:function(to,from,next){
    console.log("在当前路由改变，但是该组件被复用时调用");     // 商品详情 => 查看类似商品
    console.log("from",from);
    console.log("to",to);

    this.gid = to.query.gid;
    this.getGoodsDetail();


    next()
  },
  /* beforeRouteLeave:function(to,from,next){
    // 导航跳转(路由切换时),需要从原本的导航离开,进入到新的导航 => 在离开之前,会触发此钩子函数 => 

    console.log("组件内守卫:路由切换,离开之前执行:from",from);
    console.log("组件内守卫:路由切换,离开之前执行:to",to);
    // next();

    // next(false);

    // var isSave = false;
    // if(isSave == false){ // 未保存
    //   if(confirm("数据未保存,是否离开?")){
    //     next()
    //   }else{
    //     next(false);
    //   }
    // }else{
    //   next();
    // }

    this.end = Date.now();

    if(this.end - this.start < 10*1000){ // 任务没做完
      if(confirm("任务还未完成,是否离开?")){
        next()
      }else{
        next(false);
      }
    }else{
      next();
    }



  } */



}
</script>

<style scoped>
.detail{
  padding: 0.1rem;

}

.detail img{
  width: 100%;
}
</style>
